<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const pieChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
  theme
});
// prettier-ignore
const data = [["0.00",0.5],["0.08",1.5],["0.20",0.5],["0.38",1.5],["0.42",1.5],["0.62",0.5],["0.70",0.5],["1.08",1.5],["1.20",0.5],["1.38",1.5],["1.42",1.5],["1.62",0.5],];
const valueList = data.map(function (item) {
  return item[1];
});
const dateList = data.map(function (item) {
  return item[0];
});
setOptions(
  {
    visualMap: [
    {
      show: false,
      type: 'continuous',
      seriesIndex: 0,
      min: 0,
      max: 400
    },
   
  ],

  title: [
    {
      left: 'center',
      text: '静态心电图'
    },
   
  ],
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    {
      data: dateList
    },
    {
      data: dateList,
      // gridIndex: 1
    }
  ],
  yAxis: [
    {},
    {
      // gridIndex: 1
    }
  ],
  grid: [
    {
      bottom: '60%'
    },
    {
      top: '60%'
    }
  ],
  series: [
    {
      type: 'line',
      showSymbol: false,
      data: valueList
    },
   
  ]
  }
);

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="pieChartRef" style="width: 100%; height: 30vh" />
   <div class="mt-10">
    
  </div>
</template>
